<template>
  <el-row class="container">
    <el-col :span="24">
      <el-row>
        <el-col :span="24"><h2>布展——设置普通展</h2></el-col>
      </el-row>
      <el-row style="margin-top: 10px;">
        <el-col :span="21" :offset="3">
          <el-form :inline="true" :model="form" class="demo-form-inline" ref="form">
            <el-row>
              <el-col :span="8">
                <el-form-item label="" prop="name" :rules="rules">
                  <el-input v-model="form.name" @clear="emptySearch" placeholder="区域名称、别称" clearable size="mini" clearable :disabled="!isuseRadio"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSearchArea(form)" size="mini" :disabled="!isuseRadio">搜索</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item>
                  <el-cascader
                    :disabled="!isuseCascader"
                    clearable
                    v-model="formData1.areaId"
                    size="mini"
                    :options="option"
                    @active-item-change="handleItemChange"
                    @change="cascaderSelected"
                    :props="{
                      value: 'id',
                      label:'name',
                      children: 'cities'
                    }"
                  ></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="3">
          <el-radio v-for="(item,index) in listData" :key="index"
                    :disabled="!isuseRadio"
                    v-model="formData.areaId"
                    :label="item.id"
                    @change="radioSelected">
            {{item.name}}</el-radio>
        </el-col>
      </el-row>
      <el-row style="margin-top: 30px">
        <el-col :offset="3" :span="21" style="position: relative">
          <el-transfer
            target-order="push"
            :button-texts="['<<', '>>']"
            :titles="['待布展展品','布展展品']"
            v-model="areaExhibit"
            :data="allExhibit"
            @right-check-change="rightSelected"
            :props="{
              key: 'exhibitId',
              label: 'mainTitle'
            }"
          ></el-transfer>
          <!-- <el-button type="primary" @click="toTop" :disabled="!istoTop" style="position:absolute;left: 318px;top:60% ">设为特展</el-button> -->
          <div style="margin-top: 20px;margin-left: 450px">
            <el-button type="danger" :disabled="!allExhibit.length" @click="areaExhibit=[]">清空布展区域</el-button>
            <el-button type="primary" :disabled="!allExhibit.length" @click="resetAreaExhibit">恢复</el-button>
            <el-button type="success" :disabled="!allExhibit.length" @click="onSubmit">保存</el-button>
          </div>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<script>
  import ApiClient from '@/utils/ApiClient'
  import AppSelector from '@/components/AppSelector'


  export default {
    components: {
      'app-selector':AppSelector,
    },
    data() {
      return {
        listData: [], // 搜索区域列表
        form: { //区域搜索框
          name: '',
          page: 1,
          size: 9999
        },
        //区域选择框绑定
        formData: {
          areaId: null,
        },//此处绑定两次，选取一个使用
        //区域选择框绑定1
        formData1:{
          areaId: null,
        },
        //区域选项
        option:[],
        rules:{message:'(至少输入2个文字后才可搜索)',min:2,trigger:'blur',required:true},
        //控制选择操作
        isuseRadio:true,
        isuseCascader:true,
        //未布展展品
        exhibitOption:[],
        //布展区域信息
        areaExhibit:[],
        allExhibit:[],
        selectedExhibitId:null,
      }
    },
    methods: {
      initData() {
        ApiClient.get('/backend/common/floorList.do',{page:1,size:9999}).then(data => {
          let array = _.map(_.cloneDeep(data),function(v){v.name = v.floorName;v.cities = [];return v})
          this.option = array
        });
      },
      onSubmit(form) {
        this.$confirm('确定布展?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          ApiClient.post('/backend/areaExhibit/add.do',{
            areaId: this.formData.areaId&&this.isuseRadio&&!this.isuseCascader?this.formData.areaId:this.formData1.areaId[1],
            exhibitIdList: this.areaExhibit}).then(data => {
              ApiClient.get("/backend/areaExhibit/checkSpecial.do").catch( error => { // 当有楼层没有设置特展时
                this.$confirm(error,'提示',{
                  confirmButtonText: '去设置',
                  cancelButtonText: '取消',
                  type: 'warning',
                  center: true
                }).then( () => {
                  this.$router.push('special'); // 点击去设置跳转到特展设置页
                })
              })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      // 搜索区域
      onSearchArea(form) {
        if(form.name.length < 2)return; // 搜索字段少于2个字符
        ApiClient.get("/backend/area/list.do",form).then( data => {
          if( data.items.length === 0 ){
            this.$message({
              type: 'info',
              message: '未匹配到任何区域'
            });
          }
          this.listData = data.items;
        })
      },
      //级联选择父级改变
      handleItemChange(value){
          let array = this.option.filter(function(v){
            return v.id === +value
          })
          if(!array[0].cities.length){
            ApiClient.get('/backend/area/list.do',{page:1,size:9999,floorId:value}).then(data => {
              array[0].cities = data.items
            })
          }
      },
      //级联选择选中
      cascaderSelected(value){
        if(value.length){
          this.isuseRadio = false;
          this.getAreaExhibit(value[1])
        }else{//执行清楚操作
          this.isuseRadio = true;
          this.allExhibit = [];
          this.areaExhibit = [];
        }
      },
      // 单选区域选中操作
      radioSelected(value){
          this.isuseCascader = false;
          this.getAreaExhibit(value);
      },
      // 清空搜索框时
      emptySearch() {
        this.isuseCascader = true;
        this.formData.areaId = null; // 清空选择的单选按钮
        this.listData = [];
        this.allExhibit = [];
        this.areaExhibit = [];
      },
      //拉取区域布展信息
      getAreaExhibit(id){
        let promises = ['/backend/areaExhibit/list.do', '/backend/areaExhibit/detail.do'].map( (ajaxUrl,i) => {
          let data = i===0 ? null : {areaId:id};
          return ApiClient.get(ajaxUrl,data);
        });
        Promise.all(promises).then(posts => {
          this.allExhibit = _.flatten(posts);
          this.areaExhibit = posts[1].map(function(v){return v.exhibitId});
        });
      },
      //恢复操作
      resetAreaExhibit(){
        let value = this.formData.areaId&&this.isuseRadio&&!this.isuseCascader?this.formData.areaId:this.formData1.areaId[1];
        this.getAreaExhibit(value)
      },
      rightSelected(o){
        if(o.length === 1){
          this.selectedExhibitId =o[0]
        }else{
          this.selectedExhibitId =o
        }
      },
      toTop(){
        let array = _.without(this.areaExhibit,this.selectedExhibitId)
        array.unshift(this.selectedExhibitId)
        this.areaExhibit = array
      },
    },
    computed:{
      istoTop:function(){
        return (typeof this.selectedExhibitId === 'object')?false:true
      }
    },
    mounted() {
      this.initData()
    }
  }
</script>
<style  lang="scss">
  .container {
    .el-transfer-panel{
      width:300px;
      .el-transfer-panel__body{
        height:500px;
        .el-transfer-panel__list{
          height:500px;
        }
      }
    }
    .el-transfer__button{
      padding-left:30px;
      padding-right:30px;
      .el-icon-arrow-left{
        display: none;

      }
      .el-icon-arrow-right{
        display: none;
      }
    }
  }
</style>

